<template>
  <el-dialog
    :title="'查看详情'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <div>
      <div>
        <span>{{dataForm.topicText}}</span>
      </div>

      <div class="demo-fit">
        <div class="block" v-for="url in dataForm.urls">
          <img width="100%" :src="url.imageUrl"/>
        </div>
      </div>

        <!--<el-upload-->
          <!--action="#"-->
          <!--list-type="picture-card"-->
          <!--:on-preview="handlePictureCardPreview"-->
          <!--:on-remove="handleRemove">-->
          <!--<i class="el-icon-plus"></i>-->
        <!--</el-upload>-->
        <!--<el-dialog :visible.sync="dialogVisible">-->
          <!--<img width="100%" :src="dialogImageUrl" alt="">-->
        <!--</el-dialog>-->
    </div>

  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        dialogImageUrl: 'http://cdntz.sunshinewalking.com/tmp/wx86343e069d1adbbb.o6zAJsyvpDzFnAHzp0AarrAKCUrQ.eFi6ZTeX29nS81cc4749818e7bdf9b7637568e639233.jpg',
        dialogVisible: false,
        visible: false,
        dataForm: {
          topicId: 0,
          areaId: '',
          areaName: '',
          encourageNum: '',
          topicText: '',
          likeNum: '',
          tenantId: '',
          createTime: '',
          updateTime: '',
          handleType: '',
          urls: []
        },
        dataRule: {
          areaId: [
            { required: true, message: '当前地区id不能为空', trigger: 'blur' }
          ],
          areaName: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          encourageNum: [
            { required: true, message: '鼓励数量不能为空', trigger: 'blur' }
          ],
          topicText: [
            { required: true, message: '议题内容不能为空', trigger: 'blur' }
          ],
          likeNum: [
            { required: true, message: '喜欢数量不能为空', trigger: 'blur' }
          ],
          tenantId: [
            { required: true, message: '租户id不能为空', trigger: 'blur' }
          ],
          createTime: [
            { required: true, message: '创建时间不能为空', trigger: 'blur' }
          ],
          updateTime: [
            { required: true, message: '修改时间不能为空', trigger: 'blur' }
          ],
          handleType: [
            { required: true, message: '处理状态0:未处理 1:处理中 2:处理完成不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id) {
        console.log(id)
        this.dataForm.topicId = id || 0
        this.visible = true
        this.$nextTick(() => {
          if (this.dataForm.topicId) {
            this.$http({
              url: this.$http.adornUrl(`/topic/usertopic/info/${this.dataForm.topicId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.areaId = data.userTopic.areaId
                this.dataForm.areaName = data.userTopic.areaName
                this.dataForm.encourageNum = data.userTopic.encourageNum
                this.dataForm.topicText = data.userTopic.topicText
                this.dataForm.likeNum = data.userTopic.likeNum
                this.dataForm.tenantId = data.userTopic.tenantId
                this.dataForm.createTime = data.userTopic.createTime
                this.dataForm.updateTime = data.userTopic.updateTime
                this.dataForm.handleType = data.userTopic.handleType
                this.dataForm.urls = data.userTopic.urls
                console.log('urls',this.dataForm.urls)
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/topic/usertopic/${!this.dataForm.topicId ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'topicId': this.dataForm.topicId || undefined,
                'areaId': this.dataForm.areaId,
                'areaName': this.dataForm.areaName,
                'encourageNum': this.dataForm.encourageNum,
                'topicText': this.dataForm.topicText,
                'likeNum': this.dataForm.likeNum,
                'tenantId': this.dataForm.tenantId,
                'createTime': this.dataForm.createTime,
                'updateTime': this.dataForm.updateTime,
                'handleType': this.dataForm.handleType
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
